<template>
	<view class="container">
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="index_header">
				<text :class="navIndex==0?'on':''" @click="checkIndex(0)">交易</text>
				<text :class="navIndex==1?'on':''" @click="checkIndex(1)">创建交易</text>
				<text :class="navIndex==2?'on':''" @click="checkIndex(2)">P2P</text>
				<text :class="navIndex==3?'on':''" @click="checkIndex(3)">互转</text>
				<image src="/static/images/g_img19.png" mode="widthFix" class="p_img" v-show="navIndex != 3"></image>
				<image src="/static/images/img_92.png" mode="widthFix" class="p_img" v-show="navIndex == 3"></image>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->
		
			<!--交易start-->
			<view v-show="navIndex==0">
				<transaction></transaction>
			</view>
			<!--交易end-->
			
			
			<!--创建交易start-->
			<view v-show="navIndex==1">
				<establish></establish>
			</view>
			<!--创建交易end-->
			
			<!--P2P交易start-->
			<view v-show="navIndex==2">
				<ptwop></ptwop>
			</view>
			<!--P2P交易end-->
			
			<!--互转start-->
			<view v-show="navIndex==3">
				<ReRotation></ReRotation>
			</view>
			<!--互转end-->
		
		
	</view>
</template>


<script>
import transaction from './transaction.vue'
import establish from './create_transaction.vue'
import ptwop from './p2p.vue'
import ReRotation from './reciprocal_rotation.vue'
export default{
	components: {
	    /***** mescroll S *****/
	    //注册组件
		transaction,establish,ptwop,ReRotation
	    /***** mescroll E *****/
	},
	data() {
		return {
			navIndex: 0,
			height: '',
		}
	},
	onLoad(){
		this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(105) + 'px';
		console.log(this.height);
	},	
    methods:{	
		checkIndex(index) {
			console.log(index)
			this.navIndex = index;
		},
		changeName(idx){
			this.tabBarId=idx
		}
	}

}		  
</script>


<style lang="scss">
@import url("../../common/style.scss");
@import url("transaction.scss");
</style>